
<template>
  <div id="body">
    <div class="head">
      <div class="head-one">区域管理</div>
      <div class="head-two">
        <span style="color: rgba(0, 0, 0, 0.447058823529412)">车行管理</span
        >&nbsp;/&nbsp;<span>区域管理</span>
      </div>
    </div>
    <div class="middle">
      <div class="middle-top">基础信息</div>
      <div class="sahsd">
        小区名称<span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
      </div>
      <div class="sahsd">
        小区编号<span>*</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
      </div>
      <div class="sahsd">
        所属地区<span>*</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-select
          class="xialae"
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 265px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option value="jack"> Jack </a-select-option>
          <a-select-option value="lucy"> Lucy </a-select-option>
          <a-select-option value="tom"> Tom </a-select-option>
        </a-select>
      </div>
      <div class="sahsd">
        详细地址<span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
      </div>
      <div class="sahsd">
        建成日期<span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-date-picker class="xialae" @change="onChange" />
      </div>
      <div class="sahsd">
        房屋用途<span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-select
          class="xialae"
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 265px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option value="jack"> Jack </a-select-option>
          <a-select-option value="lucy"> Lucy </a-select-option>
          <a-select-option value="tom"> Tom </a-select-option>
        </a-select>
      </div>
      <div class="lins">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小区名称<span
        ></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
        &nbsp; 平方米
      </div>
      <div class="lins">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;楼栋数量<span
        ></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
        &nbsp; 栋
      </div>
      <div class="lins">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;房屋数量<span
        ></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
        &nbsp; 间
      </div>
      <div class="lins">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车位面积<span
        ></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
        &nbsp; 平方米
      </div>
      <div class="lins">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车位数量<span
        ></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-input class="midsla" placeholder="Basic usage" />
        &nbsp; 个
      </div>
      <div class="zhaol">
        <p>小区图片</p>
        <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUploadsa"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div> </a-upload
        ><br />
      </div>
      <h3>建议尺寸640*320，小于10M的JPG、PNG格式图片，可上传多张</h3>
      <div class="lins owassa">
        <b>小区简介</b>
        <a-textarea placeholder="Basic usage" :rows="4" class="linoosa" />
      </div>
    </div>
    <div class="middle">
            <div class="middle-top">基础信息</div>
            <div class="middle-body">
                <ul>
                    <li>姓名
                        <div class="middle-body-box"><a-input class="midsla" placeholder="Basic usage" /></div>
                    </li>
                    <li>微信<div class="middle-body-box"><a-input class="midsla" placeholder="Basic usage" /></div>
                    </li>
                    <li>电话<div class="middle-body-box"><a-input class="midsla" placeholder="Basic usage" /></div>
                    </li>
                    <li>QQ<div class="middle-body-box"><a-input class="midsla" placeholder="Basic usage" /></div>
                    </li>
                    <li>邮箱<div class="middle-body-box"><a-input class="midsla" placeholder="Basic usage" /></div>
                    </li>
                </ul>
            </div>
            <div class="middle-footer">
                <button class="middle-footer-button1">提交</button>
                <button class="middle-footer-button2">返回</button>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: "AddCommunity",

  data() {
    return {
      loading: false,
      imageUrl: "",
    };
  },

  mounted() {},

  methods: {
    handleChange(value, info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  },
  beforeUploadsa(info) {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      this.$message.error("You can only upload JPG info!");
    }
    const isLt2M = info.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.$message.error("Image must smaller than 2MB!");
    }
    return isJpgOrPng && isLt2M;
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#body {
  margin: 0px;
  background-color: rgba(240, 242, 245, 1);
  background-image: none;
  width: 1136px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  .middle {
        margin-top: 20px;
        width: 1136px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        background-color: rgba(255, 255, 255, 1);
        border-color: rgba(233, 233, 233, 1);
        border-width: 1px;
        border-style: solid;
        // color: #333333;
        line-height: normal;
        text-transform: none;

        .middle-top {
            border-width: 0px;
            width: 96px;
            height: 60px;
            font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: 16px;
            // color: rgba(0, 0, 0, 0.847058823529412);
            line-height: 28px;
            padding: 16px 0px 16px 32px;
        }

        .middle-body {
            display: flex;
            justify-content: center;
            align-content: center;
            top: 60px;
            width: 1136px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: right;
            font-size: 14px;
            margin-bottom: 50px;

            ul {
                text-align: right;
                margin-right: 0;
            }


            li {
                display: flex;
                margin: 25px 0 25px 0;
                align-items: center;
                justify-content: right;
            }

            .middle-body-box2 {
                margin-left: 30px;
                border-width: 0px;
                width: 260px;
                height: 32px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                text-align: left;
                line-height: 32px;

                .radio:nth-child(2) {
                    margin-left: 20px;
                    padding-left: 5px;
                }
            }

            .middle-body-box {
                margin-left: 30px;
                border-width: 0px;
                width: 260px;
                height: 32px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 12px;
                // border-color: rgba(0, 0, 0, 0.149019607843137);
                text-align: left;
                line-height: 22px;
                // border: 1px solid;

            }
        }

        .middle-footer {
            margin-bottom: 20px;
            border-width: 0px;
            left: 441px;
            top: 595px;
            display: flex;
            justify-content: center;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 22px;

            .middle-footer-button1 {
                color: white;
                background-color: rgba(24, 144, 255, 1);
                border-radius: 2px;
                border: 1px solid;
                width: 72px;
                height: 32px;
            }

            .middle-footer-button1:hover {
                background-color: rgba(24, 144, 255, .9);
            }

            .middle-footer-button2 {
                margin-left: 20px;
                color: rgba(0, 0, 0, 0.647058823529412);
                background-color: white;
                border-color: rgba(217, 217, 217, 1);
                border-radius: 2px;
                border: 1px solid;
                width: 72px;
                height: 32px;
            }

            .middle-footer-button2:hover {
                border-color: rgba(24, 144, 255, 1);
                color: rgba(24, 144, 255, 1);
            }
        }
    }

  .head {
    border-width: 0px;
    display: flex;
    font-family: "MalayalamMN", "Malayalam MN", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    left: 0px;
    top: 0px;
    width: 1136px;
    height: 97px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(233, 233, 233, 1);
    border-radius: 2px;
    box-shadow: none;

    .head-one {
      margin-top: 20px;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      line-height: 22px;
      color: #333333;
      align-self: center;
      padding: 16px 0px 0px 32px;
      box-sizing: border-box;
      width: 100%;
    }

    .head-two {
      align-self: flex-start;
      padding: 16px 0px 16px 0px;
      box-sizing: border-box;
      width: 100%;
      visibility: inherit;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.847058823529412);
      line-height: 28px;
      margin-left: -1071px;
    }
  }

  .middle {
    margin-top: 20px;
    width: 1136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "MalayalamMN", "Malayalam MN", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(233, 233, 233, 1);
    border-width: 1px;
    border-style: solid;
    color: #333333;
    line-height: normal;
    text-transform: none;
    b {
      font-weight: 400;
    }
    h3 {
      font-size: 13px;
      font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
      font-weight: 400;
      font-style: normal;
      color: rgba(0, 0, 0, 0.247058823529412);
      text-align: left;
      margin-left: 478px;
    }
    .zhaol {
      display: flex;
      margin-left: 385px;
      margin-top: 33px;
      font-size: 15px;
      p {
        width: 100px;
        margin-left: 6px;
      }
    }

    .lins {
      margin: auto;
      font-size: 15px;
      margin-top: 33px;
      margin-left: auto;
      text-align: center;
      .linoosa {
        height: 100px;
        width: 265px;
        margin-left: 20px;
        margin-bottom: 30px;
      }
    }
    .owassa {
      display: flex;
    }
    .sahsd {
      margin: auto;
      font-size: 15px;
      margin-top: 33px;

      .xialae {
        width: 265px;
      }

      span {
        color: red;
      }
    }

    .midsla {
      width: 265px;
      margin: auto;
    }
    .xiala {
      margin: auto;
      font-size: 15px;
      margin-top: 33px;
      span {
        color: red;
      }
    }
    /deep/.xialae {
      width: 265px;
    }

  
  }
}
/deep/.ant-select-enabled {
  width: 265px;
}
</style>